<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cherry Markdown - 图表工具栏测试</title>
    <link href="cherry-markdown.css" rel="stylesheet">
    <script src="echarts.min.js"></script>
    <script src="cherry-markdown.js"></script>
</head>
<body>
    <div id="cherry-markdown"></div>

    <script>
        const cherryInstance = new Cherry({
            id: 'cherry-markdown',
            value: `# Cherry Markdown 图表工具栏测试

## 工具栏配置示例

### 方式1：使用独立的图表工具栏
\`\`\`javascript
{
    toolbars: {
        toolbar: ['bold', 'italic', '|', 'lineTable', 'barTable', 'radarTable', 'mapTable']
    }
}
\`\`\`

### 方式2：使用组合式图表工具栏（推荐）
\`\`\`javascript
{
    toolbars: {
        toolbar: ['bold', 'italic', '|', 'proTable']
    }
}
\`\`\`

## 图表示例

### 折线图表格
| :line: {title: 折线图,} | Q1 | Q2 | Q3 | Q4 |
| :-: | :-: | :-: | :-: | :-: |
| 产品A | 120 | 150 | 180 | 200 |
| 产品B | 90 | 110 | 140 | 170 |
| 产品C | 60 | 80 | 100 | 130 |

### 柱状图表格
| :bar: {title: 柱状图,} | Q1 | Q2 | Q3 | Q4 |
| :-: | :-: | :-: | :-: | :-: |
| 销售额 | 1200 | 1500 | 1800 | 2100 |
| 利润 | 300 | 450 | 600 | 750 |

### 雷达图表格
| :radar: {title: 雷达图,} | 技术能力 | 沟通能力 | 管理能力 | 创新能力 | 执行能力 |
| :-: | :-: | :-: | :-: | :-: | :-: |
| 张三 | 85 | 80 | 75 | 90 | 88 |
| 李四 | 78 | 90 | 85 | 82 | 80 |
| 王五 | 90 | 75 | 88 | 85 | 92 |

### 地图表格
| :map:{title: 地图, mapDataSource: https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json,} | 数值 |
| :-: | :-: |
| 北京 | 520 |
| 上海 | 680 |
| 广东 | 850 |
| 四川 | 380 |
| 江苏 | 590 |
| 浙江 | 420 |
`,
            toolbars: {
                toolbar: [
                    'bold', 'italic', 'strikethrough', '|',
                    'color', 'header', '|',
                    'list', 'ol', 'ul', 'checklist', '|',
                    'proTable', '|',
                    'link', 'image', 'code', '|',
                    'togglePreview', 'fullScreen'
                ]
            },
            editor: {
                height: '600px'
            },
            previewer: {
                dom: false,
                className: 'cherry-editor',
                enablePreviewerBubble: true
            }
        });
    </script>
</body>
</html>
